<!-- 搜索页 -->
<template>
  <div class="popup">
    <!-- 搜索框组件 -->
    <van-search
      v-model="value"
      show-action
      :placeholder="placeholderVal"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />
    <!-- 历史记录和热门搜索 组件 -->
    <HistoryHot
      v-if="blockShow == 1"
      :searchHistoryData="searchHistoryData"
      :searchHotData="searchHotData"
      @goSearch="setValue"
    ></HistoryHot>
    <!-- 搜索提示列表 组件-->
    <SearchTipsList
      v-else-if="blockShow == 2"
      :searchTipsArr="searchTipsArr"
      @setValue="setValue"
    ></SearchTipsList>
    <!-- 综合-价格-分类组件 -->
    <SearchProducts
      :goodsList="goodsList"
      :filterCategory="filterCategory"
      @priceChange="priceChange"
      @cateChange="cateChange"
      v-else
    ></SearchProducts>
      
  </div>
</template>

<script>
// 搜索历史记录请求api
import {
  GetPopupData, //历史记录列表和热门搜索列表
  GetSearchTipsListData, //搜索提示列表
  GetSearchData, //根据关键字搜索商品
} from "@/https/http";

// 历史记录和热门搜索 组件
import HistoryHot from "@/components/HistoryHot";

//搜索提示列表组件
import SearchTipsList from "@/components/SearchTipsList";

// 引入 综合-价格-分类组件
import SearchProducts from "@/components/SearchProducts";

export default {
  data() {
    return {
      value: "", // 搜索框内容
      //1 展示历史记录和热门搜索 HistoryHot,
      //2 展示搜索提示列表 SearchTipsList
      //3 展示搜索出来内容
      blockShow: 1,
      placeholderVal: "", // 搜索框 placeholder 提示词
      searchHistoryData: [], // 历史记录列表
      searchHotData: [], // 热门搜索列表
      searchTipsArr: [], //搜索提示列表(输入框输入时)
      order: "desc", // desc 价格由高到底，asc 价格由低到底高
      categoryId: 0, // 类别id，代表下拉菜单中的全部、居家等选项
      sort: "id", // 可以是id或price
      goodsList: [], //  搜索出来的商品列表
      filterCategory: [], //下拉菜单分类数组
      newGoodsList: [], //产品列表
    };
  },
  components: {
    HistoryHot, //  历史记录和热门搜索组件
    SearchTipsList, //搜索提示列表组件
    SearchProducts, //综合-价格-分类组件
  },
  created() {
    GetPopupData().then((res) => {
      console.log('成功', res);
      this.placeholderVal = res.data.defaultKeyword.keyword; // 搜索框 placeholder 提示词
      this.searchHistoryData = res.data.historyKeywordList; // 历史记录列表
      this.searchHotData = res.data.hotKeywordList; // 热门搜索列表
    });
  },
  methods: {
    onSearch() {
      // 确定搜索
      console.log("输入确定");
      let params = {
        keyword: this.value,
        page: 1,
        size: 20,
        order: this.order, //价格排序
        categoryId: this.categoryId, //分类排序id
        sort: this.sort, //分类拍戏  price
      };
      GetSearchData(params).then((res) => {
        console.log(44, res);
        if (res.errno == 0) {
          this.blockShow = 3; // 如果由商品显示搜索的商品列表
          this.goodsList = res.data.goodsList; // 搜索出来的商品列表
          let cate = res.data.filterCategory; // 下拉菜单分类数组（全部，居家，。。。）
          cate = JSON.parse(
            JSON.stringify(cate)
              .replace(/id/g, "value")
              .replace(/name/g, "text")
          );
          this.filterCategory = cate;
        }
      });
    },
    onCancel() {
      // 点击取消 返回上一页
      console.log("取消");
      this.$router.go(-1);
    },
    onInput(val) {
      this.blockShow = 2; // 展示搜索提示列表组件
      // 输入触发
      // 搜索提示数据请求
      GetSearchTipsListData({ keyword: val }).then((res) => {
        console.log(33, res);
        this.searchTipsArr = res.data;
      });
    },
    setValue(m) {
      // 点击历史记录和热门搜索触发 触发setValue
      // 点击搜索列表提示触发 也触发setValue
      console.log(m); // m 为传过来的参数
      this.value = m;
      this.onSearch();
    },
    priceChange(m) {
      // 点击价格进行排序
      this.order = m;
      this.sort = "price";
      this.onSearch(); // 请求数据
    },
    cateChange(n) {
      // 点击分类进行筛选
      this.categoryId = n;
      this.sort = "id";
      this.onSearch(); // 请求数据
    },
  },
};
</script>
<style lang='less' scoped >
/* @import url(); 引入css类 */
.popup {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>